<template>
   <div ref="Content">
      <div v-for="item in ChatContentNow" :key="item.id" class="ContentOne" ref="ContentOne">
         <!-- 显示时间 -->
         <div class="timebox flex" v-if="(item.flag==3 || item.flag==4) && item.state == 1">
            <div class="time">{{item.createdtime | time('message')}}</div>
         </div>
         <!-- 失败原因 -->
         <div v-if="item.state==2" class="falieReason">
            {{item.faileReason}}
         </div>
         <!-- 右侧聊天 -->
         <div class="RightMessage Message flex" v-if="item.flag==1 || item.flag==3">
             <!-- 发送状态 0:正在发送 1:正常 2:失败 -->
             <div v-if="item.state !=null" class="state flex">
                 <div v-if="item.state==0"><i class="el-icon-loading"></i></div>
                 <div v-else-if="item.state==2"><i class="el-icon-warning" style="color:red"></i></div>
             </div>
             <!-- 内容 -->
             <div class="content flex" v-html="item.content"></div>
             <!-- 头像 -->
             <img :src="item.headphoto" alt="" class="headphoto" @click="toPersonal(item.uid)">
         </div>
        <!-- 左侧聊天 -->
         <div class="LeftMessage  Message flex" v-else>
            <img :src="item.headphoto" alt="" class="headphoto" @click="ViewPersonalDetail(item)">
               <div class="content flex" v-html="item.content"></div>
               
             <div v-if="item.state !=null" class="state flex">
                 <div v-if="item.state==0"><i class="el-icon-loading"></i></div>
                 <div v-else-if="item.state==2"><i class="el-icon-warning" style="color:red"></i></div>
             </div>
          
         </div>
      </div>


   </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
      ...mapState('Login',['User']),
      ...mapState('Chat',['ChatContentNow'])
     },

     methods:{
      ...mapMutations('Chat',['SETDRAWER']),
        //前往个人主页
       toPersonal(uid){  
          this.$public.ToPersonal(uid)
        },
       ViewPersonalDetail(item){
         this.SETDRAWER([1,item])   
       },

       scrollToBottom (behavior) {
           if(this.$refs.ContentOne)
            {
               const chatItem = this.$refs.ContentOne
               const lastItem = chatItem[chatItem.length - 1] 
               if(lastItem)
               lastItem.scrollIntoView({
                  behavior
               })
            }
         }
     },
     watch:{
      ChatContentNow:{
         immediate:true,
         handler(newValue,oldValue){
            let behavior = 'instant'
            if(oldValue !=null && oldValue.length>0 && newValue.length>0 && oldValue[0].touid == newValue[0].touid)
            behavior='smooth'
            this.$nextTick(() => {
                this.scrollToBottom(behavior)
             })
         }
      }
     }
  }
</script>
<style scoped lang='less'>
// 聊天信息
.ContentOne{
   width: 100%;
   margin-bottom: 10px;
}
// 时间
.timebox{
   width: 100%;
   margin: 10px 0;
   .time{
      padding: 5px;
      background: var(--GeneralBackColor);
      border-radius: 5px;
      color: white;
   }
}
//失败
.falieReason{
  width: 100%;
  text-align: center;
  color: gray;
}
// 消息
.Message{
   width: 100%;
   align-items: flex-start;
   .content{
      max-width: 50%;  
      overflow: hidden;
      padding: 5px;
      min-width: 40px;
      min-height: 30px;
      font-size: 18px;
      margin-top: 20px;
      border-radius: 10px;
      word-break: break-all;
      flex-direction: column;
      justify-content: flex-start;



   }
   .state{
       height: 30px;
       margin-top: 25px;
       i{
         font-size: 25px;
       }
   }
}
//右侧消息
.RightMessage{

   justify-content: flex-end;
   .content{  
      margin-right: 5px;
      border-top-right-radius: 0;
      background: skyblue;
      color: white;
   }
   .state{
       margin-right: 5px;
      
   }
}

//左侧消息
.LeftMessage{
   justify-content: flex-start;
   .content{  
      margin-left: 5px;
      border-top-left-radius: 0;
      background: orange;
      color: white;
   }
   .state{
       margin-left: 5px;
      
   }
}
</style>